<!doctype html>

<html>
	<HEAD>
		<link href="ckt.css" rel="stylesheet" type="text/css">
		<link type="text/css" rel="stylesheet" href="Circuit.css">
		<SCRIPT src="circuit/ckt/wz_jsgraphics.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/mootools.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/moocanvas.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/draw2d.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/DecoratedConnection.js"></SCRIPT>

		<SCRIPT src="circuit/ckt/InputPort.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/OutputPort.js"></SCRIPT>
		
		<SCRIPT src="circuit/ckt/gates/GateAND.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/gates/GateOR.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/gates/GateXOR.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/gates/GateNOT.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/gates/GateNAND.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/gates/GateNOR.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/gates/GateXNOR.js"></SCRIPT>
		
		<SCRIPT src="circuit/ckt/Connections.js"></SCRIPT>
		<SCRIPT src="circuit/ckt/Evaluate.js"></SCRIPT>
		
		<SCRIPT src="circuit/ckt/deleteFigure.js"></SCRIPT>
	
		<SCRIPT>
			var workflow;
			
			var portCnt;
			var gate;
			createANDGate = function(x,y){
				gate = new GateAND();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}
			
			createORGate = function(x,y){
				gate = new GateOR();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}
			
			createXORGate = function(x,y){
				gate = new GateXOR();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}
			
			createORGate = function(x,y){
				gate = new GateOR();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}			
			
			createNOTGate = function(x,y){
				gate = new GateNOT();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}
      			
			createNANDGate = function(x,y){
				gate = new GateNAND();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}
            			
			createNORGate = function(x,y){
				gate = new GateNOR();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}
			
			createXNORGate = function(x,y){
				gate = new GateXNOR();
				workflow.addFigure(gate, x,y);
				showOutputPorts();
			}
      
      gateDeleted = function(gate){
        if(gate.inputPort1 !== null)
          deleteInputPort(gate.inputPort1.getId());
        if(gate.inputPort2 !== null)
          deleteInputPort(gate.inputPort2.getId());
        if(gate.outputPort !== null)
          deleteOutputPort(gate.outputPort.getId());
        showOutputPorts();
      }
      
      connectionDeleted = function(conn){
        var source = conn.getSource().getId();
        var target = conn.getTarget().getId();
        deleteConnection(source, target);
        showOutputPorts();
      }
      
      connectionChanged = function(reconnectInfo){
        var oldSourcePort = reconnectInfo.oldSourcePort.getId();
        var oldTargetPort = reconnectInfo.oldTargetPort.getId();
        var newSourcePort = reconnectInfo.newSourcePort.getId();
        var newTargetPort = reconnectInfo.newTargetPort.getId();
        
        if(oldTargetPort == newTargetPort){
          //Source got changed. Overwrite existing one
          addConnection(newSourcePort, newTargetPort);          
        }
        
        if(oldSourcePort == newSourcePort){
          //Target got changed. Delete existing, add a new one
          deleteConnection(oldSourcePort, oldTargetPort);
          addConnection(newSourcePort, newTargetPort);
        }
        
        showOutputPorts();        
      }
      			
			showOutputPorts = function(){
			  var ports = getUnusedOutputPorts();
			  var portElem = document.getElementById("output_ports");
			  
			  var html = "";
			  for(i=0;i<ports.length;i++){
			   html += "<input type='button' name='" + ports[i] + "' value='"+ ports[i] +"' onClick=\"afterSelect('"+ ports[i] +"')\" />" + "&nbsp;&nbsp;[" + getPortExpression(ports[i])  + "]<br>";
        }
        
        portElem.innerHTML = "<form>" +  html + "</form";
      }

      afterSelect = function(port){
        evaluatePort(port);
      }
      
      popout = function(divId){
        var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
	  	  disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
        var content_vlue = document.getElementById(divId).innerHTML;
        
		  	var docprint=window.open("","",disp_setting);
			  docprint.document.write('<html><head><title>' + divId + '</title>');
		   	//docprint.document.write('</head><body onLoad="self.print()"><center>');
		   	docprint.document.write('</head><body"><center>');
		   	docprint.document.write(content_vlue);
		   	docprint.document.write('</center></body></html>');
		   	docprint.document.close();
		   	docprint.focus();
      } 
		</SCRIPT>
		<script type="text/javascript" language="javascript" src="circuit/circuit.nocache.js"></script>
	</HEAD>
	<BODY onselectstart="return false;" onkeydown="" style="background-color:rgb(120,114,243);">
	
	<a onclick="return(xr_nn());" style="float: right; margin-top: 5px; margin-right: 30px;">
	  <img src="signOut.png" title="Log out" onclick="onSignoutMouseOver(this)" style="cursor: pointer;">
    </a>

	 <script type="text/javascript">
        function onSignoutMouseOver(elem) {
            window.logoutGmail();
        }
    </script>
    
	<TABLE style="LEFT: 10px; POSITION: absolute; TOP: 50px; HEIGHT: 550px">
		<TR>
			<TD rowspan="2" style="WIDTH: 900px;">
        <DIV style="border: 1px solid; LEFT: 0px; WIDTH: 900px; POSITION: absolute; TOP: 0px; HEIGHT: 20px; overflow: auto; background-color:rgb(125,152,142);text-align:right;">
          <img src='arrow-up-right.jpg' onClick="popout('paintarea')"/>
        </DIV>
				<DIV id='paintarea' style="border: 1px solid; LEFT: 0px; WIDTH: 900px; POSITION: absolute; TOP: 20px; HEIGHT: 530px; overflow: auto;"></DIV>
			</TD>
			<TD style="LEFT: 910px; POSITION: absolute; WIDTH: 320px; HEIGHT: 150px; background-color:rgb(254,244,192);">
				<TABLE style="text-align: center; POSITION: absolute; WIDTH: 320px; ">
				  <TR>
				    <TD style="font-style: italic;">Output</TD>
				  </TR>
				  <TR>
				  <TD>
				    <div style="HEIGHT: 120px; WIDTH: 320px; overflow:auto; text-align: left;" id="output_ports" action="">
				    
				    </div>
				  </TD>
				  </TR>
				</TABLE>
			</TD>
		</TR>
		<TR>
			<TD style="LEFT: 910px; WIDTH: 100px; POSITION: absolute; TOP: 160px; HEIGHT: 380px">
				<div style="border: 1px solid; padding: 0px; LEFT: 0px; WIDTH: 310px; POSITION: absolute; TOP: 0px; HEIGHT: 20px; overflow: auto; background-color:rgb(125,152,142);text-align:right;">
        <img src='arrow-up-right.jpg' onClick="popout('truthTable')"/>
        </DIV>			
				<div id="truthTable" style="border: 1px solid; padding: 5px; LEFT: 0px; WIDTH: 300px; POSITION: absolute; TOP: 20px; HEIGHT: 360px; overflow: auto; background-color:rgb(254,244,192);">
        </DIV>
			</TD>		  
		</TR>
		<TR >
		  <TD style="LEFT: 910px; POSITION: absolute; TOP: 550px;WIDTH: 310px;"><a href="TODO.txt">Forthcoming features</a></TD>
		</TR>
		<TR >
		  <TD style="LEFT: 910px; POSITION: absolute; TOP: 570px;WIDTH: 310px;"><a href="Observations.txt">Observations</a></TD>
		</TR>		
	</TABLE>
      
			<SCRIPT>
			workflow  = new draw2d.Workflow("paintarea");
			portCnt = 1;
			
			workflow.getContextMenu=function(){
				var menu=new draw2d.Menu();
				var oThis=this;
				menu.appendMenuItem(new draw2d.MenuItem("AND",null,function(x,y){
					createANDGate( x, y);
				}));
				menu.appendMenuItem(new draw2d.MenuItem("OR",null,function(x,y){
					createORGate( x, y);
				}));
				menu.appendMenuItem(new draw2d.MenuItem("NOT",null,function(x,y){
					createNOTGate(x, y);
				}));
				menu.appendMenuItem(new draw2d.MenuItem("XOR",null,function(x,y){
					createXORGate(x, y);
				}));
				menu.appendMenuItem(new draw2d.MenuItem("NAND",null,function(x,y){
					createNANDGate(x, y);
				}));
				menu.appendMenuItem(new draw2d.MenuItem("NOR",null,function(x,y){
					createNORGate(x, y);
				}));
				menu.appendMenuItem(new draw2d.MenuItem("XNOR",null,function(x,y){
					createXNORGate(x, y);
				}));
				return menu;
			};
		</SCRIPT>
</BODY>
</html>